<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #can {
        border: 1px solid #000;
        position: absolute;
        left: 0;top: 0;
        right: 0;
        margin: auto;
    }

    #can1 {
        border: 1px solid #000;
        position: absolute;
        left: 0;top: 0;
        right: 0;
        margin: 400px 0;
    }
     #can2{
        border: 1px solid #000;
        position: absolute;
        left: 0;top: 0;
        right: 0;
        margin: 650px auto;
    }
    #p{ 
        width: 500px;
        text-align: center;
        position: absolute;
        left: 0;top: 0;
        right: 0;
        margin: 500px 0;
        font-size: 30px;
        z-index: -1;
    }
</style>

<body>
    <canvas id="can" width="500" height="400">
        
    </canvas>
    <canvas id="can1" width="500" height="200">
    
    </canvas>
    <canvas id="can2" width="500" height="500">
    
    </canvas>
    <p id="p">恭喜你中奖500万</p>
</body>
<script>

    const vac=document.querySelector('#can')
    const vac1=document.querySelector('#can1')
    const vac2=document.querySelector('#can2')
    const context1=vac.getContext('2d')
    const context2=vac1.getContext('2d')
    const context=vac2.getContext('2d')
   
   

    // context1.strokeStyle='#000'//设置描边边框strokeStyle
    context1.lineWidth=2 //设置描边宽度 lineWidth
    context1.beginPath();
    
     
     
     context1.arc(250, 200, 150, Math.PI / 180 * 0, Math.PI / 180 *360);//画脸
     
        context1.fillStyle = "pink"//设置填充颜色fillStyle
        context1.fill();
    // context1.stroke();
    
        
    context1.beginPath();
     context1.arc(180, 170, 30, Math.PI / 180 * 0, Math.PI / 180 *360 ,true);//左眼睛
            context1.fillStyle="#fff"
            context1.fill();
             context1.closePath();
            //  context1.stroke()
               context1.beginPath();
            context1.arc(190, 170, 20, Math.PI / 180 * 0, Math.PI / 180 * 360, true);//左眼珠子
              context1.fillStyle = "#000"
                context1.fill();

            context1.closePath();
             context1.stroke()
             context1.beginPath();
             
     context1.arc(320, 170, 30, Math.PI / 180 * 0, Math.PI / 180 *360 ,true);//有眼睛
     
     context1.fillStyle = "#fff"
        context1.fill();
         context1.closePath();
           
            // context1.stroke();
           context1.beginPath();
        context1.arc(330, 170, 20, Math.PI / 180 * 0, Math.PI / 180 * 360, true);//有眼珠
       context1.fillStyle = "#000"
        context1.fill();
      
      context1.stroke();
         context1.closePath();
    context1.beginPath();
    
     context1.arc(250, 250, 80, Math.PI / 180 * 10, Math.PI / 180 *140 );
     context1.moveTo(320,250)
     context1.lineTo(340, 280);
     context1.closePath();
   context1.stroke()
context1.beginPath();
context1.fillStyle='#000';
    context1.font = '13px sans-serif';
context1.moveTo(0, 400);
context1.lineTo(30, 370);

context1.fillText('高薪就业', 0, 400);

context1.moveTo(30, 370);


context1.lineTo(90, 360);
    context1.fillText('不是梦想', 20, 370);
context1.moveTo(90, 360);
context1.lineTo(133, 310);
    context1.fillText('选择全栈', 80, 360);
context1.moveTo(133, 310);
context1.lineTo(190, 390);
    context1.fillText('月薪过万', 123, 310);
    context1.moveTo(190, 390);
    context1.lineTo(200, 310);
    context1.fillText('不选全栈', 180, 390);
    context1.moveTo(200, 310);
        context1.lineTo(250, 100);
        context1.fillText('等于白干', 190, 310);
           context1.moveTo(250, 100);
            context1.lineTo(270, 190);
            context1.fillText('未来可期', 240, 100);
               context1.moveTo(270, 190);
                context1.lineTo(350, 100);
                context1.fillText('发展无限', 260, 190);
                   context1.moveTo(350, 100);
                    context1.lineTo(400, 250);
                    context1.fillText('积云教育', 340, 100);
                       context1.moveTo(400, 250);
                        context1.lineTo(470, 100);
                        context1.fillText('不掰扯', 390, 250);
                           context1.moveTo(470, 100);
                            context1.lineTo(500, 0);
                            context1.fillText('就实干', 430, 100);
        
context1.stroke();


    
    context2.beginPath();
    context2.fillStyle='#ccc';
   context2.fillRect(0,0 ,vac1.width,vac1.height);
    context2.fillStyle='red';
    context2.font='20px sans-serif';
    context2.textAlign='center';
    
    
   context2.fillText('刮开我有惊喜', vac1.width/2, vac1.height/2);

    context2.stroke();
    
    

     vac1.addEventListener('mousedown',down1,false)  
     vac1.addEventListener('mousemove',move1,false)  
     vac1.addEventListener('mouseup',up1,false) 
     let isgo=false
     function down1(){
        isgo=true
     }
     function move1(e){
   
        if(isgo==true){
            //    console.log(e);  
            //    layerY
            let x=e.clientX-vac1.offsetLeft
            let y=e.clientY-vac1.offsetTop
            context2.beginPath();
            context2.globalCompositeOperation='destination-out';
            context2.arc(x, y, 20, Math.PI / 180 * 0, Math.PI / 180 * 360);
            context2.fill();
            
        }
     }
     function up1(){
        isgo=false
     }
     
        context.beginPath();
        setInterval(() => {
         context.save();
            context.clearRect(0, 0, vac2.width, vac2.clientHeight);

       
      
        
        context.translate(250, 250);
      
            context.save();
        context.lineWidth=5;
        
       context.beginPath();
       
        context.arc(0, 0, 150, Math.PI / 180 * 0, Math.PI / 180 * 360);
        context.stroke();
        
        context.beginPath();
        
       context.arc(0, 0, 10, Math.PI / 180 * 0, Math.PI / 180 * 360);
        
     context.stroke();
     context.beginPath();
     
     for (let i = 1; i < 13; i++) {
            context.lineWidth=5;
            context.rotate(2*Math.PI/12 );
            // context.fillText(i , 125, 0);
            context.moveTo(135, 0);
            context.lineTo(150, 0);
          
            
           context.fill();
           
         context.stroke();
          
     }
      context.restore();
            context.save();
     for (let i = 4; i < 16; i++) {
            context.lineWidth=5;
            // context.rotate(2*Math.PI/12 );
            let j=2*Math.PI/12*(i-4)
            console.log(Math.cos(j)*120);
            context.fillText(i==12?12:i%12 , Math.cos(j)*120, Math.sin(j)*120);
           context.textAlign = "center";
         
           context.fill();
           
         context.stroke();
          
     }
      context.restore();
            context.save();
    
     for (let i = 0; i < 60; i++) {
            context.lineWidth=3;
            context.rotate(2*Math.PI/60);
            context.moveTo(143, 0);
            context.lineTo(150, 0);
             context.stroke();
       
     }
     context.restore();
     context.save();
     
    
     
     

        
        
        let time = new Date()
         let h = time.getHours() % 12
         let m = time.getMinutes() % 60
         let s = time.getSeconds() % 60
       
       
         context.rotate(2 * Math.PI / 12*h + (2 * Math.PI / 12 * m / 60) - Math.PI/2);
            context.beginPath();
             context.lineWidth = 6;
         context.moveTo(0, 0);
         context.lineTo(70, 0);
         context.stroke();
         context.restore();
         context.save();
         
        
        context.rotate(2 * Math.PI / 60*m + (2 * Math.PI / 60 * s / 60) - Math.PI / 2)
        context.beginPath()
        context.lineWidth = 4;
        
           context.moveTo(0, 0);
         context.lineTo(90, 0);
         context.stroke();
         context.restore();
         context.save();
       


         context.rotate(2 * Math.PI / 60*s  - Math.PI / 2)
          
           context.beginPath()
           context.lineWidth = 2;
         context.moveTo(0, 0);
         context.lineTo(110, 0);
         context.stroke();
        context.restore();
         context.save();
          context.restore();
           context.restore();
           context.restore();
            
     }, 1000);
     
     
     
    
     
     
    
    
     

</script>
</html>